<template>
    <view class="main">
        <view class="block-title"><text>水平</text></view>
        <view class="row-container">
            <view class="row-block block-a">
                <text>方块A</text>
            </view>
            <view class="row-block block-b">
                <text>方块B</text>
            </view>
            <view class="row-block block-c">
                <text>方块C</text>
            </view>
        </view>
        
        
        <view class="block-title"><text>纵向</text></view>
        <view class="col-container">
            <view class="col-block block-a">
                <text>方块D</text>
            </view>
            <view class="col-block block-b">
                <text>方块E</text>
            </view>
            <view class="col-block block-c">
                <text>方块F</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
.row-container{
    display: flex;
    flex-direction: row;
    background-color: #cfcfcf;
}

.row-block{
    width: 30%;
    height: 50px;
    margin: 5px;
    text-align: center;
    line-height: 50px;
}


.col-container{
    display: flex;
    flex-direction: column;
    background-color: #cfcfcf;
}

.col-block{
    width: 97%;
    height: 50px;
    margin: 5px;
    text-align: center;
    line-height: 50px;
}

.block-a{
    background-color: red;
}

.block-b{
    background-color: green;
}

.block-c{
    background-color: yellow;
}
</style>
